<template>
	 <view class="TutorItemList">
		 <view @tap="tapSwtichItem(item,index)" :class="atciveIndex===index ? 'TutorItemList_item activeClass':'TutorItemList_item'" :style="{width,height,fontSize:size}" v-for="(item, index) in  list" :key="index">
			 <image class="image" :src="item.icon"></image>
			 <text>{{item.text}}</text>
		 </view>	
	 </view>
</template>

<script>
	export default {
		name: 'TutorItemList',
		emits: ['clickSwtichItem'],
		props: {
			//栏目数据列表
			list:{
				type: Array,
				default:[
					{
						icon:'/static/tabbar/code_gray.png',
						text:'滑雪'
					},
					{
						icon:'/static/tabbar/code_gray.png',
						text:'健身'
					},
					{
						icon:'/static/tabbar/code_gray.png',
						text:'台球'
					},
					{
						icon:'/static/tabbar/code_gray.png',
						text:'瑜伽'
					}
				]
			},
			//选中的项目index
			atciveIndex:{
				type: Number,
				default:0
			},
			//item 高度
			height:{
				type: String,
				default: '120rpx'
			},
			//item 宽度
			width:{
				type: String,
				default: '120rpx'
			},
			//字体大小
			size:{
				type: String,
				default: '20rpx'
			}
		},
		data() {
			return {
				 
			};
		},
		methods: { 
			 tapSwtichItem(item,index){
				this.$emit("clickSwtichItem", {
					item,
					index
				})
			 }
		}
	};
</script>

<style  lang="scss" scoped>
	.TutorItemList{
		width: 100%;
		display: flex;
		justify-content: space-between; 
		.TutorItemList_item{
			background-color: #efefef;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			border-radius:20rpx;
			position: relative;
			 .image{
				width: 52rpx;
				height: 52rpx;
				display: block;
			}
		}
		.activeClass{
			 background: linear-gradient(to top, #fff,  #e4f6f3);
			 box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		}
		.activeClass::after {
		  content: '';
		  position: absolute;
		  bottom: -5px; /* 调整三角形的位置 */
		  left: 50%;
		  transform: translateX(-50%); /* 居中 */
		  width: 0;
		  height: 0;
		  border-left: 5px solid transparent;
		  border-right: 5px solid transparent;
		  border-top: 5px solid #fff; /* 小三角形的颜色，与背景色一致 */
		}
	}
	 
	 
</style>